<template>
	<view class="pagebox flex-column">
		<view class="userbox flex-row-center">
			<image class="head mr10" src="../../static/logo.png" mode="aspectFill"></image>
			<view class="name">{{obj.u.name}}</view>
			<view class="flex1"></view>
			<!-- <image class="hisicon mr10" src="../../static/49.png" mode="aspectFill" @click="proxy.$c.go_url('/pages/customer/hislist')"></image> -->
			<image class="seticon" src="../../static/50.png" mode="aspectFill" @click="set"></image>
		</view>
		
		<view class="flex1 overflow-y pd30">
			<view class="item flex-row pd20" v-for="(v,i) in obj.list" :key="i" @click="goroom(v)">
				<view class="spot flex-center" v-if="v.cou>0">{{v.cou||1}}</view>
				<view class="headbox">
					<image :src="v.head?`${proxy.$c.fileHost}head/${v.head}`:`../../static/34.png`" mode=""></image>
				</view>
				<view class="w100 flex-column">
					<view class="w100 flex-row-center ju-between">
						<text class="username">询盘客户：{{v.nickname||`客户${i+1}`}}</text>
					</view>
					<view class="">
						<view class="flex1"></view>
						<text class="intime">{{v.updatetime||''}}</text>
					</view>
				</view>
			</view>
			<view v-if="!obj.list.length" class="nodata flex-center">--暂无询盘--</view>
		</view>
		
		<view v-if="obj.showpass" class="editpass flex-center" @click="obj.showpass = false">
			<view class="card pd30 flex-column-center" @click.stop="()=>{}">
				<view class="w100 flex-row ju-between mb40">
					<text class="title">修改密码</text>
					<image @click="obj.showpass = false" class="cancel" src="../../static/33.png" mode="aspectFill"></image>
				</view>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="10" placeholder="请输入旧密码" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="obj.editf.oldpass"/>
				</div>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="10" placeholder="请输入新密码" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="obj.editf.newpass"/>
				</div>
				<button class="button base-bg w-color" :disabled="obj.disabled" @click.stop="submitEdit">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch,computed,nextTick,onUnmounted } from 'vue'
	import { onLoad,onShow,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll,onUnload,onHide } from '@dcloudio/uni-app';
    let { proxy } = getCurrentInstance()
	let obj = reactive({
		u: proxy.$c.getUser()?JSON.parse(proxy.$c.getUser()):{},
		req: {
		  "currentpage": 1,
		  "pagesize": 100
		},
		showpass: false,
		editf: {
			oldpass: '',
			newpass: ''
		},
		disabled: false,
		newitem: proxy.$c.Websocket.newitem,
		soketOnline: proxy.$c.Websocket.soketOnline,
		list: [],
		Interval: null
	})
	
	onMounted(()=>{
		connectChat()
	})
	
	onShow(()=>{
		initInterval()
	})
	
	onHide(()=>{
		// if(proxy.$c.Websocket){
		// 	proxy.$c.Websocket.disconnect(true)
		// }
		clearInterval(obj.Interval)
		obj.Interval = null
	})
	
	// 连接广播并监听数据
	const connectChat=()=>{
		let url = `/topic/company/1`
		proxy.$c.Websocket.init({}).then(client=>{
			proxy.$c.Websocket.addSubscribe(url);
		})
	}
	
	watch(
		()=>obj.newitem,
		(val)=>{
			console.log('val',val);
			if(val){
				let msg = val.body?JSON.parse(val.body):{};
				if(msg.action==='add'){
					const i = obj.list.findIndex(e=>e.room_id==msg.room_id)
					if(i==-1){
						obj.list.push({
							cou: 1,
							...msg
						})	
					}else{
						obj.list[i].cou = obj.list[i].cou==0?1:obj.list[i].cou
					}
				}
			}
		},{deep:true}
	)
	
	const initInterval=()=>{
		if(obj.Interval){
			clearInterval(obj.Interval)
			obj.Interval = null
		}
		getlist()
		obj.Interval = setInterval(()=>{
			getlist()
		},2000)
	}
	
	const getlist=()=>{
		proxy.$reQuest.post('customerservice/product/inquiry/list',obj.req,{token:true}).then(res=>{
			if(res.success){
				obj.list = res.msg.list||[]
				obj.list.map(e=>{
					e.room_id = `${obj.u.room_id}_${e.userid}`
				})
			}
		}).catch(err=>{})
	}
	
	const goroom=(v)=>{
		proxy.$reQuest.post('customerservice/product/inquiry/room/in',{userid: v.userid,room_id:v.room_id},{token:true}).then(res=>{
			console.log('res',res);
			if(res.success){
				proxy.$c.go_url(`/pages/customer/chat${proxy.$c.JSONToUrl({
					...v,
					identity: 'cs'
				})}`)
			}else{
				proxy.$c.Toast(res.err||'回复失败！')
			}
		}).catch(err=>{
			proxy.$c.Toast('回复失败！')
		})
	}
	
	const set=()=>{
		uni.showActionSheet({
			itemList: ['退出登录', '修改密码'],
			// itemList: ['退出登录', '修改密码', '修改头像'],
			success:(res)=>{
				if(res.tapIndex==0){
					uni.showModal({
						title: '提示',
						content: '确定要退出登录吗？',
						success:(res)=>{
							if (res.confirm) {
								uni.removeStorageSync('token')
								uni.removeStorageSync('loginData')
								uni.removeStorageSync('user')
								uni.reLaunch({url: '/pages/login'})		
							}
						}
					});
				}else if(res.tapIndex==1){
					obj.showpass = true
				}else if(res.tapIndex==2){
					uni.chooseImage({
						sourceType: ['camera', 'album'],
						count: 1,
						extension:['.png','.jpg','.jpeg'],
						success: (e) => {
							const img = e.tempFilePaths[0];
							const uploadTask = uni.uploadFile({
								url: proxy.$c.uploadHost,
								filePath: img,
								header: {'token': proxy.$c.getToken()},
								name: 'file',
								formData: {
									'maxwidth': 1000,
									'maxheight': 1000
								},
								success: res1 => {
									let filename = JSON.parse(res1.data).filename
									
								},
								fail: err => {
									uni.showToast({
										title: JSON.stringify(err),
										icon: 'none'
									})
								}
							});
							// 监听进度
							uploadTask.onProgressUpdate(re => {
								obj.progress = re.progress
								if (re.progress == 100) {
									obj.progress = 0
								}
							});
						}
					})
				}
			}
		});
	}
	
	const submitEdit=()=>{
		if(!obj.editf.oldpass){
			proxy.$c.Toast('请输入旧密码！')
			return
		}
		if(!obj.editf.newpass){
			proxy.$c.Toast('请输入新密码！')
			return
		}
		if(obj.editf.oldpass===obj.editf.newpass){
			proxy.$c.Toast('新密码不能和旧密码相同！')
			return
		}
		obj.disabled = true
		proxy.$reQuest.post('customerservice/editpass',obj.editf,{token: true},).then(res=>{
				if(res.success){
					proxy.$c.Toast('修改成功,即将跳转登录！')
					setTimeout(()=>{
						uni.removeStorageSync('token')
						uni.removeStorageSync('loginData')
						uni.removeStorageSync('user')
						uni.reLaunch({url: '/pages/customer/login'})	
					},2000)
				}else{
					obj.disabled = false
					proxy.$c.Toast(res.err);
				}
		}).catch(err=>{obj.disabled = false})
	}
</script>

<style lang="scss" scoped>
	.pagebox{
		width: 100vw;height: 100vh;overflow: hidden;
		background: #f0f0f0;
		.userbox{
			width: 100vw;height: auto;background: #fff;padding: 20rpx 40rpx;box-sizing: border-box;
			.head{width: 60rpx;height: 60rpx;border-radius: 60rpx;}
			.name{font-size: 26rpx;}
			.hisicon{width: 40rpx;height: 40rpx;opacity: 0.6;}
			.seticon{width: 40rpx;height: 40rpx;opacity: 0.6;}
		}
		.nodata{width: 100%;height: 100%;font-size: 22rpx;color: #999;}
		.item{
			position: relative;
			width: 100%;height: auto;border-radius: 10rpx;background: #fff;margin-bottom: 30rpx;
			.spot{position: absolute;right: 20rpx;top: 20rpx;z-index: 1;width: 10rpx;height: 10rpx;padding: 10rpx;border-radius: 50%;background-color: red;color: #fff;font-size: 22rpx;}
			.headbox{min-width: 100rpx;height: 100rpx;border-radius: 100rpx; overflow: hidden; margin-right: 20rpx; image{width: 100rpx;height: 100rpx;}}
			.title{font-size: 32rpx;font-weight: bold;}
			.username{font-size: 28rpx;color: #333;}
			.intime{font-size: 24rpx;color: #999;}
		}
		.editpass{
			position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,0.6);border-radius: 0rpx;padding: 50rpx;box-sizing: border-box;z-index: 99999999;
			left: 0;top: 0;
			.title{font-size: 32rpx;}
			.cancel{width: 40rpx;height: 40rpx;}
			.button{
				width: 100%;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;
			}
			.inputbox{
				width: 100%;height: 100rpx;border-radius: 100rpx;background: #f0f0f0;font-size: 26rpx;
			}
			.editcard{
				width: 80%;height: auto;border-radius: 10rpx;background: #fff;margin-bottom: 30rpx;
				.protitle{font-size: 32rpx;font-weight: bold;}
				.dept{font-size: 24rpx;color: #999;}
			}
		}
	}
</style>
